<template>
	<view>
		<view class="cu-list menu-avatar" >
			<view class="cu-item "  :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in banklist" :key="index"
			 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
				<view style="text-align: left;width: 100%;padding: 0 20rpx;">
					<view class="text-grey">{{item.bank_name}}</view>
					<view class="text-gray text-sm">
						</text>{{item.bank_card_number}}
					</view>
				</view>
				<view class="move">
					<view class="bg-red">删除</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banklist:[''],
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		onLoad() {
			this.$api.my_bank().then(res=>{
				console.log(res);
				this.banklist = res.data
			})
		},
		methods:{
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style lang="scss">

</style>
